// 清分对账
<template>
  <div class="difference">
    <Authc permissions="trade:common:config:diff:edit">
      <Button class="addBtn" type="primary" :disabled="addTableBtn" @click="addDiffCause">新增 </Button>
    </Authc>

    <Table border :columns="columns" :data="dataList">
      <template slot-scope="{ row, index }" slot="diffCause">
        <Input type="text" v-model="diffData" maxlength="50" v-if="editIndex === index" placeholder="请输入，字数不超过50" />
        <span v-else>{{ row.name }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="diffCauseType">
        <Select placeholder="请选择" clearable v-model="diffDataType" transfer v-if="editIndex === index">
          <Option v-for="(item, index) in selectCostType" :value="item.key" :key="index">{{ item.value }}</Option>
        </Select>
        <span v-else>{{ row.typeName }}</span>
      </template>

      <template slot-scope="{ row, index }" slot="action">
        <div v-if="editIndex === index">
          <Button @click="handleSubmit">保存</Button>
          <Button @click="cancelDiffCauseEdit">取消</Button>
        </div>
        <div v-else>
          <Authc permissions="trade:common:config:diff:edit">
            <Button @click="deleteDiffCause(row)" :disabled="isDeleteBtn">删除</Button>
          </Authc>
        </div>
      </template>
    </Table>
  </div>
</template>

<script>
import { Button, Input, Modal, Message, Table, Select, Option } from "view-design";
import Loading from "@/components/Loading";
import { namespace } from "../../Module/paymentDifferenceMoudle";
import Authc from "@/components/Authc";
import config from "@/utils/config";
import appService from "@/utils/appService";

export default {
  name: "PaymentDifference",
  components: {
    Loading,
    Authc,
    Button,
    Input,
    Modal,
    Table,
    Select,
    Option
  },
  data() {
    return {
      namespace: namespace,
      loading: true,
      ruleValidate: {},
      dataList: [] /** 列表数据 **/,
      editIndex: -1 /** 编辑列的索引 **/,
      diffData: "" /** 存放编辑时的差异原因 **/,
      diffDataType: '', /** 存放type */
      addTableBtn: false, /** 控制一次只能新增一个 */
      isDeleteBtn: false, /** 删除按钮 */
      selectCostType: [
        {
          key: '0',
          value: '平台有'
        },
        {
          key: '1',
          value: '平台无'
        }
      ],
      columns: [
        {
          title: "序号",
          type: "index",
          width: 80,
          align: "center"
        },
        {
          title: "差异原因",
          slot: "diffCause",
          // key: "name",
          align: "center"
        },
        {
          title: "类型",
          slot: "diffCauseType",
          // key: "type",
          align: "center"
        },
        {
          title: "操作人",
          key: "createdBy",
          align: "center"
        },
        {
          title: "操作",
          key: "action",
          slot: "action",
          align: "center",
          permissions: ["trade:settlement:manager"],
          width: 200
        }
      ]
    };
  },
  created() {
    this.getDiffList();
  },
  methods: {
    /** 获取差异原因列表 **/
    async getDiffList() {
      try {
        let res = await this.$store.dispatch(`${namespace}/getDiffList`, {
          module: "settlement_diff_config"
        });
        let list = res.data.data;
        list.forEach(e => {
          if (e.type == '0') e.typeName = '平台有'
          if (e.type == '1') e.typeName = '平台无'
        });
        this.dataList = list;
      } catch (error) {
        this.$Message.error({
          content: error
        });
      }
    },
    /** 新增差异原因 **/
    addDiffCause() {
      this.isDeleteBtn = true;
      this.addTableBtn = true;
      this.dataList.unshift({
        name: "",
        type: '',
        typeName: '',
        createdBy: appService.getUserInfo().name
      });
      /** 改变编辑状态 **/
      this.editIndex = 0;
    },
    /** 取消编辑 **/
    cancelDiffCauseEdit() {
      this.isDeleteBtn = false;
      this.addTableBtn = false;
      this.dataList.shift();
      this.editIndex = -1;
      this.diffData = "";
      this.diffDataType = '';
    },
    /** 保存差异原因 **/
    async handleSubmit() {
      try {
        if (!this.diffData || !this.diffDataType) {
          // Notice.warning({
          //   title: "请输入异常原因"
          // });
          this.$Message.warning({
            content: '请完整输入内容'
          });
          return;
        }
        let obj = {
          code: this.diffData,
          name: this.diffData,
          type: Number(this.diffDataType),
          createdBy: appService.getUserInfo().name,
          module: "settlement_diff_config"
        };
        let res = await this.$store.dispatch(`${namespace}/save`, obj);
        this.isDeleteBtn = false;
        this.addTableBtn = false;
        this.$Message.success({
          content: '新增成功'
        });
        this.getDiffList();
        this.editIndex = -1;
        this.diffData = "";
        this.diffDataType = '';
      } catch (error) {
        this.$Message.error({
          content: error
        });
      }
    },
    /** 删除差异原因 **/
    deleteDiffCause(row) {
      try {
        Modal.confirm({
          render: (h, params) => {
            return h("div", [
              h(
                "div",
                {
                  class: "selfConfirm"
                },
                "确定删除?"
              )
            ]);
          },
          onOk: async () => {
            let res = await this.$store.dispatch(
              `${namespace}/deleteDiffCause`,
              row.id
            );
            this.$Message.success({
              content: "删除成功"
            });
            this.getDiffList();
            this.editIndex = -1;
            this.diffData = "";
            this.diffDataType = '';
          }
        });
      } catch (error) {
        this.$Message.error({
          content: error
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.addBtn {
  margin-bottom: 10px;
}
</style>
